<template>
  <div>
    <!--1：本地户籍人口、2：非本地户籍人口、3：境外来华停（居）留人员、4：特殊人群、5：关爱人员、6：重点青少年-->
    <template
      v-if="
        baseType === '1' ||
        baseType === '2' ||
        baseType === '3' ||
        baseType === '4' ||
        baseType === '5' ||
        baseType === '6'
      "
    >
      <div @click="toPersonDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">人口管理类型</span>
          <span class="gb-card-info__value">{{ item.residentTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">姓名</span>
          <span class="gb-card-info__value">{{ item.personName }}</span>
        </p>
        <template v-if="item.residentType === '20' && item.foreignerName">
          <p class="gb-card-info">
            <span class="gb-card-info__label">外文名</span>
            <span class="gb-card-info__value">{{ item.foreignerName }}</span>
          </p>
        </template>
        <p class="gb-card-info">
          <span class="gb-card-info__label">房屋信息</span>
          <span class="gb-card-info__value van-multi-ellipsis--l2">{{ item.houseInfo }}</span>
        </p>
        <p class="gb-card-info" v-if="item.labelName">
          <span class="gb-card-info__label">标签</span>
          <span class="gb-card-info__value">
            <van-tag
              size="medium"
              color="rgba(59, 153, 218, 0.2)"
              text-color="#3B99DA"
              v-for="(label, index) in item.labelName.split(',')"
              :key="index"
            >
              {{ label }}
            </van-tag>
          </span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">上次更新时间</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
        <p class="gb-card-info" v-if="item.expirationData">
          <span class="gb-card-info__label">租住截至时间</span>
          <span class="gb-card-info__value">{{ item.expirationData }}</span>
        </p>
      </div>
    </template>
    <!--房屋信息-->
    <template v-if="baseType === '7'">
      <div @click="toHouseDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">房屋使用形式</span>
          <span class="gb-card-info__value">{{ item.houseStateName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">房屋信息</span>
          <span class="gb-card-info__value van-multi-ellipsis--l2">{{ item.houseName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">上次更新时间</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
      </div>
    </template>
    <!--车辆信息-->
    <template v-if="baseType === '8'">
      <div @click="toCarDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">持有人姓名</span>
          <span class="gb-card-info__value">{{ item.personName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">车牌号</span>
          <span class="gb-card-info__value">{{ item.carNo }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">上次更新时间</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
      </div>
    </template>
    <!--宠物信息-->
    <template v-if="baseType === '9'">
      <div @click="toPetDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">宠物姓名</span>
          <span class="gb-card-info__value">{{ item.petName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">主人姓名</span>
          <span class="gb-card-info__value">{{ item.owner }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">上次更新时间</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
      </div>
    </template>
    <!--单位信息-->
    <template v-if="baseType === '10'">
      <div @click="toCompanyDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">单位名称</span>
          <span class="gb-card-info__value">{{ item.companyName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">单位地址</span>
          <span class="gb-card-info__value">{{ item.companyAddress }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">上次更新时间</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
      </div>
    </template>
    <!--已督办事件-->
    <template v-if="baseType === '11'">
      <div @click="toCompanyDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">事件标题</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">督办意见</span>
          <span class="gb-card-info__value">{{ item.companyName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">督办回复</span>
          <span class="gb-card-info__value">{{ item.companyAddress }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">最新流转记录</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">事件位置</span>
          <span class="gb-card-info__value">{{ item.updateTime }}</span>
        </p>
      </div>
    </template>
    <!--未督办事件-->
    <template v-if="baseType === '12'">
      <div @click="unsupervisedDetail">
        <div class="gb-unsupervised-box">
          <div class="gb-unsupervised">
            <div class="gb-card-info-left">
              <img src="../../../../assets/images/basic/icon_calendar_black@2x.png" />
            </div>
            <div class="gb-card-info-right">
              <div>
                <p>小程序上报</p>
                <p>2021-08-08 12:00</p>
              </div>
              <div>事件标题事件标题事件标题事…</div>
              <div>江西省南昌市高新区101智慧大厦2楼</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!--组织信息-->
    <template v-if="baseType === '13'">
      <div @click="toOrganizationDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.organizationTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">组织类型</span>
          <span class="gb-card-info__value">{{ item.organizationCategoryName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">统一社会信用代码</span>
          <span class="gb-card-info__value">{{ item.licenseNum }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">采集时间</span>
          <span class="gb-card-info__value">{{ item.addTime }}</span>
        </p>
      </div>
    </template>
    <!--党组织信息-->
    <template v-if="baseType === '14'">
      <div @click="toPartyOrganzationDetail">
        <p class="gb-card-info">
          <span class="gb-card-info__label">登记类型</span>
          <span class="gb-card-info__value">{{ item.baseTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">党组织名称</span>
          <span class="gb-card-info__value">{{ item.partyOrganizationName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">组织类别</span>
          <span class="gb-card-info__value">{{ item.partyOrganizationTypeName }}</span>
        </p>
        <p class="gb-card-info">
          <span class="gb-card-info__label">采集时间</span>
          <span class="gb-card-info__value">{{ item.addTime }}</span>
        </p>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 数据类型
    baseType: {
      type: String
    },
    // 查询详情类型
    queryType: {
      type: String
    },
    // 区分更新和审核（Approve-collection：-分隔，前面区分接口，后面区分路由）
    type: {
      type: String
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    toPersonDetail() {
      const params = {
        personCode: this.item.personCode,
        baseType: this.baseType,
        residentType: this.item.residentType,
        type: this.type.split('-')[0],
        queryType: this.queryType
      }
      if (this.baseType === '1' || this.baseType === '2' || this.baseType === '3') {
        // 本地户籍人口、非本地户籍人口、境外人员
        this.$router.push({
          path: `/resident/${this.type.split('-')[1]}/person`,
          query: params
        })
      } else if (this.baseType === '4') {
        // 特殊人员
        this.$router.push({
          path: `/resident/${this.type.split('-')[1]}/personspecial`,
          query: params
        })
      } else if (this.baseType === '5') {
        // 关爱人员
        this.$router.push({
          path: `/resident/${this.type.split('-')[1]}/personcare`,
          query: params
        })
      } else if (this.baseType === '6') {
        // 重点青少年
        this.$router.push({
          path: `/resident/${this.type.split('-')[1]}/personteenagers`,
          query: params
        })
      }
    },
    toHouseDetail() {
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/house`,
        query: {
          houseCode: this.item.houseCode,
          type: this.type.split('-')[0],
          queryType: this.queryType
        }
      })
    },
    toCarDetail() {
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/car`,
        query: {
          carCode: this.item.carCode,
          baseType: this.baseType,
          type: this.type.split('-')[0],
          queryType: this.queryType
        }
      })
    },
    toPetDetail() {
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/pet`,
        query: {
          code: this.item.code,
          baseType: this.baseType,
          type: this.type.split('-')[0],
          queryType: this.queryType
        }
      })
    },
    toCompanyDetail() {
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/company`,
        query: {
          companyCode: this.item.companyCode,
          type: this.type.split('-')[0]
        }
      })
    },
    toPartyOrganzationDetail() {
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/partyOrganization`,
        query: {
          partyOrganizationCode: this.item.partyOrganizationCode,
          type: this.type.split('-')[0]
        }
      })
    },
    unsupervisedDetail() {
      this.$router.push({
        path: '/cockpit/detail'
      })
    },
    toOrganizationDetail() {
      console.log(`/resident/${this.type.split('-')[1]}/organization`)
      this.$router.push({
        path: `/resident/${this.type.split('-')[1]}/organization`,
        query: {
          organizationType: this.item.organizationType,
          organizationCode: this.item.organizationCode,
          type: this.type.split('-')[0],
          queryType: '3'
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.gb-unsupervised-box {
  background: #ffffff;
  min-height: 100%;
}
.gb-unsupervised {
  display: flex;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
  .gb-card-info-left {
    width: 200px;
    height: 124px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .gb-card-info-right {
    width: calc(100% - 200px);
    div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:first-child {
        font-size: 24px;
        color: #3cbdd0;
      }
      p:last-child {
        font-size: 24px;
        color: #000000;
        padding-right: 32px;
      }
    }
    div:nth-child(2) {
      font-size: 32px;
      color: #000000;
      padding: 16px 0 32px 0;
    }
    div:nth-child(2) {
      font-size: 20px;
      color: #000000;
    }
  }
}
</style>
